<template>
  <view class="pa-3">
    <view
      class="bg-cell py-3 bdrs-8 mb-3 hover-1"
      v-for="it in rows"
      :key="it.id"
      @click="$navTo('order/detail', { id: it.id })"
    >
      <view class="al-c px-3">
        <span>泰农臻选</span>
        <span
          class="ml-auto fz-13"
          :class="it.status < 10 ? 'color-1' : 'op-5'"
          >{{ $h.getOrdSta(it.status) }}</span
        >
      </view>

      <view>
        <list-confirm-goods :list="it.buy_list" :total="it.buy_num" plain />
      </view>

      <view class="al-c fz-12 mt-3 px-3">
        <view class="fz-13 op-5">
          {{ new Date(it.created_at).format() }} 下单
        </view>
        <span class="ml-auto">￥</span>
        <span class="fz-18">{{ it.final_price }}</span>
        <view class="ml-2" v-if="it.status == 0">
          <u-button
            type="warning"
            size="small"
            :loading="payId == it.id"
            @click.native.stop="onPay(it)"
            >支付</u-button
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    rows: Array,
  },
  computed: {
    myRows() {
      return this.rows.map((it) => {
        return {
          ...it,
        };
      });
    },
  },
  data() {
    return {
      payId: null,
    };
  },
  methods: {
    async onPay(it) {
      try {
        this.payId = it.id;
        await this.$store.dispatch("payOrder", {
          ord_no: it.ord_no,
        });
        // this.$toast("支付成功", 1);
        await this.$sleep(500);
      } catch (error) {
        console.log(error);
      }
      this.payId = null;
      uni.$emit("update-all-tab", { type: "order" });
    },
  },
};
</script>
